<template>
<view class="add-bill">
	 <uni-nav-bar title="开具发票" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
    <view class="add-form">
        <view class="form-item">
          <text class="title">发票类型</text>
          <picker @change="bindPickerChange" :value="index" :range="array">
            <view class="picker">
              <view class="fb-type">
                <view class="type-label">{{array[index]}}</view>
              </view>
            </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="title">抬头类型</text>
                  <view class="checkbox" @tap="checked" data-billHeaderType="0">
                        <image src="/static/static/images/check.png" v-if="bill.billHeaderType==1" style="height: 30rpx; width:30rpx"></image>
                        <image src="/static/static/images/checked.png" v-if="bill.billHeaderType==0" style="height: 30rpx; width:30rpx"></image>
                   </view>
                  <!-- <view class="checkbox {{bill.billHeaderType==0 ? 'checked' : ''}}" bindtap="checked" data-billHeaderType="0"></view> -->
                  <text class="value">个人</text>
                  <view class="checkbox" @tap="checked" data-billHeaderType="1">                       
                        <image src="/static/static/images/check.png" v-if="bill.billHeaderType==0" style="height: 30rpx; width:30rpx"></image>
                        <image src="/static/static/images/checked.png" v-if="bill.billHeaderType==1" style="height: 30rpx; width:30rpx"></image>
                  </view>
                  <!-- <view class="checkbox {{bill.billHeaderType==1 ? 'checked' : ''}}" bindtap="checked" data-billHeaderType="1"></view> -->
                  <text class="value">公司</text>
        </view>
        <view class="form-item">
          <text class="title">发票抬头</text>
            <input class="input" :value="bill.billHeader" @input="inputBillHeader" @blur="checktaxid" placeholder="请填写纳税人识别号" placeholder-style="placeholderStyle"></input>
        </view>
        <view class="form-item">
          <text class="title">发票金额</text>
            <input class="input"  disabled="true" :value="bill.calcAmount.payAmount" placeholder></input>
        </view>
        <view class="form-item noborder">
          <text class="title">电子邮箱</text>
            <input class="input" @input="inputEmail" @blur="checkmail" :value="bill.billReceiverEmail" placeholder="用于向您发送电子发票" placeholder-style="placeholderStyle"></input>
        </view>
    </view>
    <text class="txt">电子普通发票与纸质发票具有同等法律效力，可支持报销入账</text>
    <view class="btns">
      <button class="save" @tap="submit">提交申请</button>
      <button class="cannel" @tap="cancelbill">不开发票</button>
    </view>
</view>
</template>

<script>
import checkinput from "../../../lib/checkinput.js";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

export default {
  data() {
    return {
      bill: {},
      array: ['普通发票', '增值税发票'],
      index: 0,
	  billHeaderType: '0'
    };
  },

  components: {uniNavBar},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      bill: JSON.parse(options.bill)
    });
    console.log(JSON.stringify(this.bill));
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
	  var bill = this.bill;
	   bill.billType = 0;
       bill.billHeaderType = this.billHeaderType;	  
  },
  methods: {
	  goback(){
		  uni.navigateBack()
	  },
	  checkmail(e){
		  let email;
		  let that = this;
		   if(e.detail.value){
			  email =  e.detail.value
		   } else {
			  email = that.bill.billReceiverEmail;
		   }
		  console.log(checkinput.checkEmail(email));
		  if(!checkinput.checkEmail(email)){
			  uni.showToast({
			  	title:'邮箱不正确'
			  })
		  }
	  },
	   checkmail(){
		   let email = this.bill.billReceiverEmail;
		   if(!checkinput.checkEmail(email)){
		   			  uni.showToast({
		   			  	title:'邮箱不正确'
		   			  })
		   }
		   return checkinput.checkEmail
	   },
	  checktaxid(e){
		  let taxid;
		  if(e.detail.value){
			 taxid = e.detail.value;  
		  }else{
			  textid = that.bill.billHeader;
		  }
		  console.log(checkinput.checkTaxId(taxid));
		  if(!checkinput.checkTaxId(taxid)){
		  			  uni.showToast({
		  			  	title:'纳税人不正确'
		  			  })
		  }
	  },
	  checktaxid(){
		 let taxid = this.bill.billHeader;
		 if(!checkinput.checkTaxId(taxid)){
		 			  uni.showToast({
		 			  	title:'纳税人不正确'
		 			  })
		 }
		 return checkinput.checkTaxId(taxid)
	  },
    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value);
      var bill = this.bill;
      bill.billType = e.detail.value;
	  this.setData({
        index: e.detail.value,
        bill: bill
      });
    },
    checked: function (e) {
      var bill = this.bill;
      this.billHeaderType = e.currentTarget.dataset.billheadertype;
	  bill.billHeaderType = this.billHeaderType;
      this.setData({
        bill: bill
      });
    },
    inputBillHeader: function (e) {
      console.log(JSON.stringify(e.detail.value));
      var bill = this.bill;
      bill.billHeader = e.detail.value;
      this.setData({
        bill: bill
      });
    },
    inputEmail: function (e) {
      console.log(JSON.stringify(e.detail.value));
      var bill = this.bill;
      bill.billReceiverEmail = e.detail.value;
      this.setData({
        bill: bill
      });
    },
    submit: function () {
      var that = this;
      const eventChannel = this.getOpenerEventChannel();
      uni.navigateBack({
        delta: 1,
        success: function (res) {
          eventChannel.emit('onFinish', that.bill);
        }
      });
    },
    cancelbill: function () {
      const eventChannel = this.getOpenerEventChannel();
	  emailcheckresult = this.checkmail();
	  taxidcheckresult = this.checktaxid();
	  if (emailcheckresult && taxidcheckresult){
		uni.navigateBack({
		  delta: 1,
		  success: function (res) {
		    eventChannel.emit('onFinish');
		  }
		});  
	  }
    }
  }
};
</script>
<style>


page{
  height: 100%;
  background: #f4f4f4;
}

.placeholderStyle{
  color: #b2b2b2;
}

.add-bill {
  display: flex;
  flex-direction: column;
}



.add-bill .add-form{
  background: #fff;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.add-bill .form-item{
  height: 100rpx;
  margin-left: 30rpx;
  border-bottom: 1px solid #e5e4e5;
  display: flex;
  align-items: center;
  padding-right: 30rpx;
}

.add-bill .form-item .noborder{
  border: none;
}
.add-bill .form-item .title{
  font-size: 28rpx;
  color: #888888;
}


.fb-type{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10rpx;
}

.fb-type .type-label{
  flex: 1;
  color: #333;
  font-size: 28rpx;
}

/* .fb-type .type-icon{
  height: 20rpx;
  width: 40rpx;
  margin-left: 6rpx;
} */


.add-bill .form-item .checkbox{
  float: left;
  height: 30rpx;
  width: 30rpx;
  /* margin: 65rpx 18rpx 65rpx 26rpx; */
  margin: 0 10rpx;
  
}

.add-bill .form-item .value{
  margin-left: 2rpx;
  margin-right: 50rpx;
  color: #333333;
}
.add-bill .input{
  flex: 1;
  height: 44rpx;
  line-height: 44rpx;
  overflow: hidden;
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333333;
}

.add-bill .txt{
  margin: 30rpx;
  font-size: 24rpx;
  color: #888888;
}

.add-bill .btns{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.add-bill .cannel,.add-bill .save{
  font-size: 30rpx;
  color: #fff;
  border:none;
  border-radius: 40rpx;
  width: 640rpx;
}

.add-bill .cannel{
  background: #fff;
  color: #353535;
  margin-top: 30rpx;
}

.add-bill .save{
  background: #b28550;
  font-size: 30rpx;
}

</style>